<template>
  <div class="loginContainer">
    <div class="loginInner">
      <!-- 左边背景 -->
      <div class="loginLeft">
        <img src="../img/work.svg" />
      </div>
      <div class="loginRight">
        <!-- 登录表单 -->
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          :rules="rules"
          :label-position="labelPosition"
        >
          <div class="font">登录</div>
          <el-form-item prop="userId">
            <el-input
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              v-model="form.userId"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userPassword">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="form.userPassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="identifyCode">
            <div class="identify">
              <el-input
                placeholder="请输入验证码"
                class="verifyInput"
                v-model="form.identifyCode"
              ></el-input>
              <!-- 验证码信息 -->
              <img
                :src="identifyCodeURL"
                alt="加载失败"
                @click="changeIdentifyCode"
                class="identifyCode"
                crossorigin="use-credentials"
              />
              <a href="javascript:;" @click="changeIdentifyCode">换一个？</a>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="loginButtonClick">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Loading } from "element-ui";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      // 设置label字体位置
      labelPosition: "top",
      // 表单对象
      form: {
        userId: "",
        userPassword: "",
        identifyCode: "",
        codeUUID: "",
      },
      // 定义表单校验规则
      rules: {
        userId: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度应该在3 到 20 个字符",
            trigger: "blur",
          },
        ],
        userPassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度应该在3 到 20 个字符",
            trigger: "blur",
          },
        ],
        identifyCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度应该 4 个字符",
            trigger: "blur",
          },
        ],
      },
      // 验证码地址
      identifyCodeURL: "",
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    // 获取验证码
    async getCode() {
      const { data: res } = await axios({
        method: "GET",
        url:
          "/api/admin/getIdentifyCode?time=" +
          new Date().getTime() +
          "&codeUUID=" +
          this.form.codeUUID,
      });
      console.log("获取验证码成功");
      this.identifyCodeURL = res.data.codeBase64;
      this.form.codeUUID = res.data.codeUUID;
    },
    // 登录按钮被点击
    loginButtonClick() {
      this.$refs.form.validate(async (valid) => {
        // 命名合法
        if (valid) {
          // 打开加载
          const loading = this.$loading({
            lock: true,
            text: '拼命加载中，请稍后...',
            spinner: 'el-icon-loading',
            background: 'rgba(0,0,0,0.1)',
            target: document.querySelector('.logionContainer')
          });
          const { data: res } = await axios({
            method: "POST",
            url: "/api/admin/login",
            data: this.form,
          });
          // 如果登录失败重定向操作
          switch (res.code) {
            case 400:
            case 401:
              // 账户密码错误重载页面
              this.$alert("账号或者密码错误，请检查！", "提示", {
                confirmButtonText: "确定",
                callback: () => {
                  loading.close();
                  // 重载页面
                  location.reload();
                },
              });
              break;
            case 402:
              this.$alert("验证码错误，请检查！", "提示", {
                confirmButtonText: "确定",
                callback: () => {
                  loading.close();
                  // 重载页面
                  location.reload();
                },
              });
              break;
            case 200:
              // 成功接收token信息
              localStorage.setItem("token", res.data.userToken);
              // 跳转页面
              setTimeout(() => {
                loading.close();
                this.$message.success("登录成功");
                console.log("执行跳转");
                this.$router.push({
                  path: "/index",
                  query: {
                    userName: res.data.userName,
                  },
                });
              }, 1200);
              break;
            default:
              this.$message.error("未知错误");
              loading.close();
          }
        } else {
          // 不合法
          this.$alert("请检查填写的信息是否合法！", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
      });
    },
    // 当换一个按钮被点击
    changeIdentifyCode() {
      this.getCode();
    },
  },
};
</script>

<style>
.loginContainer {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, #9796f0, #fbc7d4);
  animation-name: fadeIn;
  animation-duration: 1.5s;
}
.loginInner {
  position: absolute;
  /* 设置弹性盒子：块元素显示在一行 */
  display: flex;
  height: 60%;
  width: 60%;
  /* 水平、垂直水平居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置圆角 */
  border-radius: 15px;
  /* 设置阴影 */
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}
/* 登录左侧背景 */
.loginLeft {
  width: calc(50%);
  height: 100%;
  background-color: #f2f5fa;
  padding: 60px 60px;
  /* 设置圆角 */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.loginLeft img {
  width: 100%;
  height: 100%;
  /* 等比自适应 */
  object-fit: contain;
}
/* 登录右侧 */
.loginRight {
  width: calc(50%);
  height: 100%;
  background-color: #fff;
  padding: 80px 70px;
  /* 设置圆角 */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
/* 登录字体 */
.loginRight .font {
  font-weight: 700;
  font-size: 35px;
  margin-bottom: 45px;
}
/* 输入框 */
.el-input--prefix .el-input__inner {
  border-radius: 15px;
  height: 60px !important;
}
/* 按钮 */
.loginRight .el-button {
  font-weight: 800;
  border-radius: 15px !important;
  width: 100%;
  height: 50px;
  background-color: #9d99ee !important;
  color: #fff !important;
  font-size: 16px !important;
}
/* 输入框点击 */
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #9796f0 !important;
}
/* 验证码输入框 */
.verifyInput .el-input__inner {
  width: 250px !important;
  height: 50px !important;
  border-radius: 15px;
}
.verifyInput {
  width: 75% !important;
  height: 50% !important;
}
.identify {
  display: flex;
  height: 50px;
}
/* 验证码图片 */
.identifyCode {
  width: 150px;
  height: 50px;
  cursor: pointer;
}
.identify a {
  width: 70px;
  font-size: 13px;
}
</style>